<template>
  <el-dialog
    v-model="props.dialogVisible"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :before-close="handleCancel"
    :destroy-on-close="destroyOnClose"
  >
    <slot></slot>
    <template v-if="props.footer" #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleOk">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: '500px',
  },
  title: {
    type: String,
    default: '',
  },
  handleCancel: {
    type: Function,
  },
  handleOk: {
    type: Function,
  },
  footer: {
    type: Boolean,
    default: false,
  },
  destroyOnClose:{
    type:Boolean,
    default:false
  }
})
const handleCancel = () => {
  props.handleCancel()
}
const handleOk = () => {
  props.handleOk()
}
defineExpose({ handleOk })
</script>

<style lang="scss" scoped></style>
